<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>重庆邮电大学70周年校庆</title>
    <link rel="stylesheet" href="./tools/bootstrap/bootstrap.min.css">
    <link rel="icon" href="./icon2.ico">
    <!-- 引入jQuery，bootstrap，vue -->
    <script src="./tools/jquery-3.5.1.min.js"></script>
    <script src="./tools/bootstrap/bootstrap.min.js"></script>
    <script src="./tools/bootstrap/bootstrap.bundle.min.js"></script>
    <script src="./tools/vue.js"></script>
    <!-- 自己的js和css -->

    <link rel="stylesheet" href="./css/main.css">

</head>

<body>
    <audio src="./music.mp3" id="music" autoplay></audio>
    <div class="container-flouid" id="App" >
        <div class="row justify-content-end"  style="margin-right:  0;margin-left: 0;">
            <!-- 左边内容 -->
            <div class="col-lg-3 position-fixed  leftCon border-right" style="background-image: url(./images/001.png);">
                <!-- 导航栏 -->
                <header class="navbar d-sm-flex px-0 px-lg-3 py-3 py-lg-4">
                    <a href="http://www.cqupt.edu.cn/" class="navbar-brand" target="_blank"><img src="images/logo1.png" alt=""></a>

                    <ul class="nav mr-auto">
                        <li class="nav-item">
                            <a href="http://www.cqupt.edu.cn/" class="nav-link text-dark font-weight-bold" target="_blank">重庆邮电大学</a>
                        </li>
                    </ul>

                    <span class="iconfont icon-menu" id="showBtn"></span>
                </header>
                <!-- logo链接2-->
                <div class="d-flex align-items-center login ">
                    <div class="px-0 px-lg-5">

                        <div class="d-none d-lg-block my-3 text-center">
                            <a href="http://70.cqupt.edu.cn/zzjg.htm" class="text-success" target="_blank">
                                <img src="images/logo2.png" class="img-fluid" alt="">
                            </a>


                        </div>
                        <div class="my-lg-5 d-none d-sm-block font-weight-bold text-left mx-sm-5 mx-lg-0">
                            <span class="mytext text-monospace"> {{brif}}</span>
                        </div>
                    </div>
                </div>

                <!-- 点击后要展示的内容 -->
                <div class="d-flex flex-column  position-absolute menu hide"
                    style="background-image: url(./images/001.png);">
                    <header class="navbar d-flex px-0 px-lg-3 py-3 py-lg-4">
                        <a href="http://www.cqupt.edu.cn/" class="navbar-brand" target="_blank"><img src="images/logo1.png" alt="" width="36"></a>
                        <span class="iconfont icon-guanbi mr-3 font-weight-bold" id="closeBtn"></span>
                    </header>

                    <div class="list text-center">
                        <ul class="list-unstyled mx-sm-5">
                            <li v-for="list in headerNav" class="my-5"><a :href="list.url" target="_blank"
                                    class="font-weight-bold text-dark text-mutedpy-2 d-block">{{ list.text }}</a></li>
                        </ul>
                        <hr>

                    </div>
                    <a href="http://70.cqupt.edu.cn/zzjg.htm" class="text-success text-center mt-3" target="_blank">
                        <img src="images/logo2.png" class="img-fluid" alt="">
                    </a>


                </div>

            </div>
            <!-- 右边内容 -->
            <div class="col-lg-9" style="background-image: url(./images/002.png);">
                <!-- 第一层，轮播图 -->
                <div class="row">

                    <div data-ride="carousel" id="pic" class="carousel slide">
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <img :src="kvimg" alt="" class="img-fluid">
                            </div>
                            <div class="carousel-item" v-for="kv in kvimgs" :key="kv">
                                <img :src="kv" alt="" class="img-fluid">
                            </div>
                        </div>

                        <a href="#pic" data-slide="prev" class="carousel-control-prev">
                            <span class="iconfont icon-left"></span>
                        </a>
                        <a href="#pic" data-slide="next" class="carousel-control-next">
                            <span class="iconfont icon-right"></span>
                        </a>
                        <ul class="carousel-indicators">
                            <li data-target="#pic" data-slide-to="0"></li>
                            <li data-target="#pic" data-slide-to="1"></li>
                            <li data-target="#pic" data-slide-to="2"></li>
                            <li data-target="#pic" data-slide-to="3"></li>
                        </ul>
                    </div>
                </div>

                <!-- 第二层，校庆活动-->
                <div class="row pb-5 betters">
                    <!-- 标题 -->
                    <div class="col-12 text-center">
                        <h3 class="my-4 text-dark font-weight-bold">初心系国脉，奋进 i 时代</h3>
                        <p class="text-muted">校庆活动</p>
                    </div>
                    <!-- 四块itemcard内容 -->
                    <div class="col-12">
                        <ul class="row list-unstyled justify-content-around px-5">
                            <li class="col-6 col-md-3" v-for="card in itemCard">
                                <a :href="card.url" class="d-inline-block text-center px-2  rounded postion-relative" target="_blank"
                                    style="background-image: linear-gradient(45deg,red 0%,yellow 50%);">
                                    <img :src="card.src" class="img-fluid" alt="" style="border-radius: 50%;">
                                    <h4 class="my-2 text-dark font-weight-bold">{{ card.h4 }}</h4>
                                    <p class="text-muted">{{card.p1}}<br>{{card.p2}}</p>
                                    <p class="caption">了解更多 ›</p>
                                </a>
                            </li>

                        </ul>
                    </div>

                </div>

                <!-- 第三层，重邮发展 -->
                <div class="row overflow-hidden  pb-5 teah ">
                    <!-- 标题 -->
                    <div class="col-12 text-center pb-5">
                        <h3 class="my-4 text-dark font-weight-bold">重聚70 | 梦游南山</h3>
                        <p class="text-muted">回顾母校</p>
                    </div>

                    <!-- 滚动内容 -->
                    <div class="col-12">
                        <div class="scroll pl-3" style="overflow-x: scroll; ">
                            <ul class="list-unstyled d-flex justify-content-between">
                                <li class="card mr-3 cursor" v-for="scroll in develops">
                                    <img :src="scroll.img" class="card-img-top" alt="">
                                    <div class="card-body">
                                        <h4 class="text-muted card-title text-red font-weight-bold text-center">
                                            {{scroll.text}}</h4>
                                    </div>
                                    <span class="position-absolute text-white px-3 py-1">{{scroll.time}}</span>
                                </li>

                            </ul>
                        </div>
                    </div>
                </div>

                <!-- 第四层，四季萌芽 -->
                <div class="row teah mb-5">
                    <!-- 标题 -->
                    <div class="col-12 text-center pb-5">
                        <h3 class="my-4 text-dark font-weight-bold">春华秋实 | 四季萌芽</h3>
                        <p class="text-muted">重邮风景</p>
                    </div>
                    <div class="col-md-3 col-6 my-2 my-sm-0 text-center position-relative"
                        v-for="scroll in secondScroll">
                        <div class="position-absolute py-3 px-1"
                            style="height: 20%;width: 60%;left: 50%;;margin-left: -30%;opacity: 0.8;">
                            <img :src="scroll.img" class="img-fluid" alt="" style="width: auto;">
                        </div>


                        <a :href="scroll.url" target="_blank">
                            <img :src="scroll.src" class="img-fluid img-thumbnail" alt="">
                        </a>
                        <h4 class="my-2 text-dark font-weight-bold">{{scroll.h4}}</h4>
                    </div>

                </div>

            </div>
            <!-- 底部内容 -->
            <footer class="fixed-bottom col-12 d-none bg-white pb-2 footer" id="footer">
                <ul class="row d-flex list-unstyled justify-content-around mb-0">
                    <li class="text-center" v-for="button in buttons">
                        <a :href="button.url" class="text-muted" :class="button.active">
                            <span class="iconfont icon-shouye d-block" :class="button.icon"></span>
                            <span>{{button.text}}</span>
                        </a>
                    </li>

                </ul>
            </footer>
        </div>
    </div>

</body>

<script src="./js/main.js"></script>

<script>
    // let audio=$('#music')[0];


    $('#showBtn').on('click', function () {
        $('.menu').removeClass('hide').addClass('show themax');        
        shadowMenu();
    });
    $('#closeBtn').on('click', function () {
        $('.menu').removeClass('show themax').addClass('hide');
        
        shadowMenu();
    });

    $(window).resize(shadowMenu);

    function shadowMenu() {
        //只有当屏幕尺寸小于992，以及menu菜单是显示的状态，这时才要干掉body的滚动条
        if ($(window).innerWidth() <= 992 && $('.menu').hasClass('show')) {
            //console.log(1);
            $('body').css('overflow', 'hidden');
        } else {
            $('body').css('overflow', 'auto');
        }
    }

    //手机版点击事件跳转
    let foota = $("#footer li a");

    foota.click((e) => {
        foota.removeClass("active");
        e.currentTarget.classList.add("active");
    })
    foota[1].onclick = function () {
        $('.menu').removeClass('hide').addClass('show');
        shadowMenu();
    }
</script>

</html>